<template>
	<app-layout :overflow="false">
		<view class="nav">
			<view class="nav-title">我的金币</view>
			<view class="nav-num u-line-1">{{userInfo ? userInfo.integral : 0}}</view>
			<view class="nav-shop" @click="router('/plugins/check_in/index/index')">
				签到
			</view>
			<!-- <view class="nowdynas u-line-1">
				金币可兑换唐朝币 <text class="nowdynasex" @click="exdyn">点击兑换唐朝币</text>
			</view> -->
			<view class="nowdynas u-line-1" @click="toAbout">
				获取金币渠道方法、途径 >>>
			</view>
			<view @click="router('/pages/user-center/integral-detail/integral-detail')" class="log">
				<image load-lazy="true" src="./../image/log.png"></image>
				<text>金币明细</text>
			</view>
			<view @click="router('/plugins/integral_mall/exchange/exchange')" class="exchange">
				<image load-lazy="true" src="/static/image/icon/exchange.png"></image>
				<text>兑换记录</text>
			</view>
		</view>
		<!-- <view class="nav-tab" v-if="coupon.length == 0 && goods.length == 0">
			<view class="flex">
				<view class="item" v-for="(item,index) in tabList" :key="index"
					:class="activeTab == item.id?'active':''" @click="setTab(item)">
					{{item.name}}
				</view>
			</view>
			<view v-for="(item, index) in list" :key="index" class="u-item">
				<view class='u-desc'>{{item.desc}}</view>
				<view class='u-integral':class="[getTheme+'-m-text', getTheme]">{{item.integral}}金币</view>
				<view class="u-info">
					<text>时间: {{item.created_at}}</text>
				</view>
			</view>
		</view> -->
		<!-- <view class="dialog-bg" v-if="isexm">
			<view class="dialog-tip">
				<view class="dialog-title">兑换唐朝币</view>
				<view class="basicf">
					<view class="fbottom">
						<view class="fname">金币</view>
						<input type="number" class="input" name="amount" placeholder="请输入金币数" :value="name" @blur="blur"
							placeholder-style="style" :disabled="disabled" />
					</view>
					<view class="ftips">
						请输入想要兑换成唐朝币的金币数
					</view>
				</view>
				<view class="dialog-btn main-center">
					<view @click="isexm = false" class="dialog-close">取消</view>
					<view class="line"></view>
					<view class="dialog-submit" @click="btexdyn">确认</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="coupon" v-if="coupon.length > 0">
			<view class="coupon-title">兑换优惠券</view>
			<scroll-view scroll-x class="coupon-list">
				<view class="coupon-item" @click="router('/plugins/integral_mall/coupon/coupon?id=' + item.id)"
					v-for="item in coupon" :key="item.id">
					<image load-lazy="true" src="./../image/coupon-bg.png"></image>
					<view class="coupon-name t-omit" v-if="item.coupon.type == 2">￥
						<text>{{item.coupon.sub_price}}</text>优惠券
					</view>
					<view class="coupon-name discount" v-else>
						<text>{{item.coupon.discount}}</text>优惠券
					</view>
					<view class="coupon-user t-omit">
						{{item.integral_num}}金币<span v-if="item.price > 0">+{{item.price}}元</span>兑换
						满{{item.coupon.min_price}}元可用
					</view>
					<view class="coupon-exchange">
						<view>立即兑换</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="goods">
			<view class="goods-title">
				<view class="coupon-title">兑换商品</view>
			</view>
			<view class="dir-left-nowrap cross-center main-around cat-list">
				<view class="cat-item t-omit" @click="tabtype(item.type)"
					:class="eitype == item.type ? getTheme+'-m-back active ' + getTheme:''"
					v-for="(item,index) in twotype" :key="index">
					{{item.name}}
				</view>
			</view>
			<scroll-view scroll-x class="cat-list cat-list1">
				<view @click="tab(0)"
					:class="[`cat-item`,`t-omit`,`${_num == 0 ? getTheme+'-m-back active ' + getTheme:''}`]">全部</view>
				<view @click="tab(item.id)"
					:class="[`cat-item`,`t-omit`,`${_num == item.id ?getTheme+'-m-back active ' + getTheme:''}`]"
					v-for="(item,index) in cats" :key="index">{{item.name}}
				</view>
			</scroll-view>
			<view class="" v-if="noloading">
				<view class="goods-list dir-left-wrap" v-if="goods.length > 0">
					<view open-type="navigate" @click="toGoods(item)" class="goods-item" v-for="(item,index) in goods"
						:key="index">
						<image load-lazy="true" mode="aspectFill" class="goods-img" :src="item.cover_pic"></image>
						<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
							<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic">
							</image>
						</view>
						<view class="goods-name u-line-2">{{item.name}}</view>
						<view class="goods-price" :class="getTheme+'-m-text ' + getTheme">
							{{item.integralMallGoods.integral_num}}金币<text v-if="item.price > 0">+￥{{item.price}}</text>
						</view>
						<!-- <view class="goods-old">原价￥{{item.original_price}}</view> -->
						<!-- <view class="goods-num">仅剩{{item.goods_stock}}件</view> -->
						<button v-if="item.goods_stock > 0" class="goods-exchange"
							:class="getTheme+'-m-back ' + getTheme">立即兑换</button>
						<button v-else class="goods-exchange" style="background: #CDCDCD;color: #fff;">已售罄</button>
					</view>
				</view>
				<view class="app-no-goods" v-else>
					<app-no-goods background="#f7f7f7"></app-no-goods>
				</view>
			</view>
			<view class="loading" v-else>
				<image :src="appImg.loading" mode=""></image>
				<view class="">
					加载中...
				</view>
			</view>
		</view>
		<view class="dialog-bg" v-if="lose || success">
			<view class="dialog">
				<view @click="close">
					<image load-lazy="true" class="close" src="/static/image/icon/icon-close.png"></image>
				</view>
				<view class="lose" v-if="lose">
					<image load-lazy="true" class="lose-img" src="./../image/lose.png"></image>
					<view class="lose-title">兑换失败！</view>
					<view>当前金币不足</view>
				</view>
				<view class="success" v-if="success">
					<image load-lazy="true" class="success-head" :src="integralImg.app_image.success"></image>
					<view>恭喜您，兑换成功！</view>
					<view class="main-between success-btn">
						<view @click="toList">
							<button class="to-card">去卡券包</button>
						</view>
						<view @click="toList">
							<button class="to-use">立即使用</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dialog-bg" v-if="choose.id > 0">
			<view class="dialog-tip">
				<view class="dialog-title">提示</view>
				<view class="dialog-msg">
					确定使用
					<text v-if="choose.integral_num > 0"><text
							style="color: #ff4544">{{choose.integral_num}}</text>金币</text>
					<text v-if="choose.price > 0"><text v-if="choose.integral_num > 0">与</text>
						<text style="color: #ff4544">{{choose.price}}</text>元</text>
					兑换此优惠券？
				</view>
				<view class="dialog-btn main-center">
					<view @click="chooseItem({})" class="dialog-close">取消</view>
					<view class="line"></view>
					<view class="dialog-submit" @click="submit">确认</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>


<script>
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
	import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
	import {
		mapState,
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				success: false,
				lose: false,
				_num: 0,
				more: false,
				setting: {},
				coupon: [],
				userInfo: {
					integral: 0
				},
				choose: {
					integral: 0
				},
				banners: [],
				cats: [],
				id: 0,
				exchangeCoupon: false,
				current: 'wechat',
				goods: [],
				args: false,
				page: 1,
				// 兑换币
				isexm: false,
				amount: 0,
				// 金币明细
				/* tabList: [{
					id: 1,
					name: '获取'
				}, {
					id: 2,
					name: '扣除'
				}],
				activeTab: 1,
				apage: 1,
				list: [],
				apage_count: 1 */
				noloading: false,

				// 切换金币纯金币商城
				twotype: [{
						type: 'jinbi',
						name: '纯金币商城'
					},
					{
						type: 'integral',
						name: '金币商城'
					}
				],
				eitype: 'jinbi', // 默认为积分商城（非纯金币）
			}
		},
		components: {
			appNoGoods,
			appTabNav
		},
		computed: {
			...mapState({
				integralImg: state => state.mallConfig.plugin.integral_mall,
				appSetting: state => state.mallConfig.mall.setting,
				appImg: state => state.mallConfig.__wxapp_img.mall,
			}),
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				getTheme: 'getTheme'
			}),
		},
		methods: {
			// 金币明细
			/* setTab(e) {
				this.activeTab = e.id;
				this.list = [];
				this.apage = 1;
				this.getmxList();
			},
			async getmxList() {
				try {
					const res = await this.$request({
						url: this.$api.integral_mall.log,
						data: {
							type: this.activeTab,
							page: this.apage
						}
					});
					let {
						code,
						data,
						msg
					} = res;
					if (code === 0) {
						if (this.apage !== 1) {
							this.list = this.list.concat(data.list);
						} else {
							this.list = data.list;
							this.apage_count = data.pagination.page_count;
						}
						this.apage = data.list.length ? this.apage + 1 : this.apage;
					} else {
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 1000
						});
					}
				} catch (e) {
					this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
						this.getmxList();
					});
				}
			}, */

			close() {
				this.success = false;
				this.lose = false;
			},
			tabtype(type) {
				this.noloading = false
				this._num = 0;
				this.page = 1;
				this.goods = [];
				this.eitype = type
				this.getCat()
				this.getGoods()
			},
			tab(id) {
				this.noloading = false
				this._num = id;
				this.page = 1;
				this.goods = [];
				this.getGoods();
			},
			// 兑换币
			exdyn() {
				this.isexm = true
			},
			blur(e) {
				// console.log(e);
				this.amount = e.detail.value
			},
			btexdyn() {
				if (this.amount == '') {
					uni.showToast({
						title: '请输入想要兑换的金币值',
						icon: 'none'
					});
					return;
				}
				if (this.userInfo.integral < this.amount) {
					uni.showToast({
						title: '金币不足',
						icon: 'none'
					});
					this.isexm = false
					return;
				}
				let url = this.$api.integral_mall.dyncurrency
				if (this.eitype == 'integral') {
					url = this.$api.integral_mall.dyncurrency
				} else if (this.eitype == 'jinbi') {
					url = this.$api.jinbi_mall.dyncurrency
				}
				this.$request({
					url: url,
					data: {
						amount: this.amount,
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						});
						if (this.eitype == 'integral') {
							uni.redirectTo({
								url: '/plugins/integral_mall/index/index'
							})
						} else if (this.eitype == 'jinbi') {
							uni.redirectTo({
								url: '/plugins/jinbi_mall/index/index'
							})
						}
					}
				})
			},
			submit() {
				let that = this;
				let id = that.choose.id;
				let url = that.$api.integral_mall.coupon_submit
				if (that.eitype == 'integral') {
					url = that.$api.integral_mall.coupon_submit
				} else if (that.eitype == 'jinbi') {
					url = that.$api.jinbi_mall.coupon_submit
				}
				that.choose = {};
				if (that.userInfo != null && that.userInfo.integral < that.choose.integral_num) {
					uni.showToast({
						title: '金币不足',
						icon: 'none',
						duration: 1000
					});
				} else {
					uni.showLoading({
						title: '领取中...'
					});
					that.$request({
						url: url,
						data: {
							id: id
						},
						method: 'post'
					}).then(response => {
						if (response.code == 0) {
							let queue_id = response.data.queue_id;
							let token = response.data.token;
							that.getPayOrderId(queue_id, token)
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000
							});
						}
					}).catch(response => {
						uni.hideLoading();
					});
				}
			},

			getPayOrderId(queue_id, token) {
				let url = this.$api.integral_mall.coupon_pay
				if (this.eitype == 'integral') {
					url = this.$api.integral_mall.coupon_pay
				} else if (this.eitype == 'jinbi') {
					url = this.$api.jinbi_mall.coupon_pay
				}
				this.$request({
					url: url,
					data: {
						queue_id: queue_id,
						token: token,
					},
				}).then(response => {
					if (response.code === 0) {
						if (response.data.retry && response.data.retry === 1) {
							this.getPayDataTimer = setTimeout(() => {
								this.getPayOrderId(queue_id, token);
							}, 1000);
						} else {
							uni.hideLoading();
							this.pay(response.data.id);
						}
					} else {
						this.choose = {};
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(e => {
					this.choose = {};
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false,
					});
				});
			},
			pay(id) {
				this.$payment.pay(id).then(res => {
					this.success = true;
				}).catch(e => {
					uni.showToast({
						title: '支付失败',
						icon: 'none',
						duration: 1000
					});
				});
			},

			chooseItem(res) {
				this.choose = res;
			},

			toList() {
				this.success = false;
				uni.navigateTo({
					url: '/pages/coupon/index/index'
				});
			},
			toGoods(data) {
				// #ifndef MP-BAIDU
				if (data.goodsWarehouse.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${data.id}&sign=${data.sign}`
					});
				} else {
					if (this.eitype == 'integral') {
						uni.navigateTo({
							url: '/plugins/integral_mall/goods/goods?goods_id=' + data.id
						});
					} else if (this.eitype == 'jinbi') {
						uni.navigateTo({
							url: '/plugins/jinbi_mall/goods/goods?goods_id=' + data.id
						});
					}
				}
				// #endif

				// #ifdef MP-BAIDU
				if (this.eitype == 'integral') {
					uni.navigateTo({
						url: '/plugins/integral_mall/goods/goods?goods_id=' + data.id
					});
				} else if (this.eitype == 'jinbi') {
					uni.navigateTo({
						url: '/plugins/jinbi_mall/goods/goods?goods_id=' + data.id
					});
				}
				// #endif

			},
			toAbout() {
				if (this.eitype == 'integral') {
					uni.navigateTo({
						url: `/pages/rules/index?url=${encodeURIComponent(this.$api.integral_mall.index)}&keys=${JSON.stringify(['setting', 'rule'])}`,
					});
				} else if (this.eitype == 'jinbi') {
					uni.navigateTo({
						url: `/pages/rules/index?url=${encodeURIComponent(this.$api.jinbi_mall.index)}&keys=${JSON.stringify(['setting', 'rule'])}`,
					});
				}
			},
			router(url) {
				uni.navigateTo({
					url: url
				});
			},
			getList() {
				let that = this;
				let url = that.$api.integral_mall.index
				if (that.eitype == 'integral') {
					url = that.$api.integral_mall.index
				} else if (that.eitype == 'jinbi') {
					url = that.$api.jinbi_mall.index
				}
				that.$request({
					url: url,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						let {
							banners,
							setting,
							userInfo
						} = response.data;
						that.banners = banners;
						that.setting = setting;
						that.userInfo = userInfo;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getCoupon() {
				let that = this;
				let url = that.$api.integral_mall.coupon
				if (that.eitype == 'integral') {
					url = that.$api.integral_mall.coupon
				} else if (that.eitype == 'jinbi') {
					url = that.$api.jinbi_mall.coupon
				}
				that.$request({
					url: url,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.coupon = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getCat() {
				let that = this;
				let url = that.$api.integral_mall.cats
				if (that.eitype == 'integral') {
					url = that.$api.integral_mall.cats
				} else if (that.eitype == 'jinbi') {
					url = that.$api.jinbi_mall.cats
				}
				that.$request({
					url: url,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.cats = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getGoods() {
				let that = this;
				let url = that.$api.integral_mall.goods
				if (that.eitype == 'integral') {
					url = that.$api.integral_mall.goods
				} else if (that.eitype == 'jinbi') {
					url = that.$api.jinbi_mall.goods
				}
				that.$request({
					url: url,
					data: {
						cat_id: that._num,
						page: that.page
					}
				}).then(response => {
					that.noloading = true
					that.$hideLoading();
					if (response.code === 0) {
						that.more = false;
						if (response.data.list.length == response.data.pagination.pageSize) {
							that.page++;
							that.more = true;
						}
						if (that.page > 1) {
							that.goods = that.goods.concat(response.data.list);
						} else {
							that.goods = response.data.list;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.noloading = true
					that.$hideLoading();
				});
			},
		},
		onReachBottom() {
			if (this.more) {
				this.getGoods();
				// this.getmxList();
			}
		},

		onShareAppMessage: function() {
			/* let path = "/plugins/integral_mall/index/index"
			if (this.eitype == 'integral') {
				path = "/plugins/integral_mall/index/index"
			} else if (this.eitype == 'jinbi') {
				path = "/plugins/jinbi_mall/index/index"
			} */
			return this.$shareAppMessage({
				title: this.$children[0].navigationBarTitle,
				path: "/plugins/integral_mall/index/index",
			});
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.$children[0].navigationBarTitle,
				query: {} // 此处填写页面的参数
			});
		},

		// #endif
		onLoad(options) {
			let that = this;
			that._num = 0;
			// that.eitype = options.eitype || 'integral'
			that.eitype = options.eitype || 'jinbi'
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			that.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			that.getList();
			// that.getmxList();
			// that.getCoupon();
			that.getCat();
			that.getGoods();
		}
	}
</script>

<style scoped lang="scss">
	// 明细
	.u-item {
		font-size: 28upx;
		color: #342B2A;
		padding: 36upx 24upx;
		border-bottom: 1upx solid #e2e2e2;
		background-color: #ffffff;

		.u-desc {
			color: #353535;
			margin-bottom: 6upx;
		}

		.u-integral {
			width: 25%;
			display: inline-block;
		}

		.u-info {
			font-size: 22upx;
			float: right;
			color: #999999;
		}
	}

	.nav-tab {
		width: 702rpx;
		margin: 24rpx auto;
		background-color: #FFFFFF;
	}

	.flex {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0;
		height: 120rpx;
		border-bottom: 1rpx solid #e2e2e2;

		.item {
			width: 208rpx;
			height: 72rpx;
			line-height: 72rpx;
			position: relative;
			text-align: center;
			font-size: 28rpx;

			&.active:before {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				font-weight: 500;
				background: #342B2A;
				border-radius: 4rpx;
				width: 208rpx;
				height: 8rpx;
			}
		}
	}

	.nav {
		height: #{460rpx};
		width: 100%;
		position: relative;
		background: #342B2A;
		padding: 72rpx 72rpx 0;
	}

	.nav-bg {
		width: 100%;
	}

	.nav-title {
		width: 100%;
		// text-align: center;
		// position: absolute;
		// top: #{25rpx};
		// font-size: 28rpx;
		// line-height: 42rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		// color: #999;
		// font-size: 12px;
		margin-top: 30px;
	}

	.nav-num {
		// text-align: center;
		// width: 100%;
		width: 450rpx;
		color: #FFFFFF;
		font-size: 72rpx;
		line-height: 108rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.nav-shop {
		text-align: center;
		width: 154rpx;
		height: 56rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		border-radius: 28px;
		position: absolute;
		right: 72rpx;
		top: 188rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.nowdynas {
		width: 100%;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 108rpx;
	}

	.nowdynasex {
		text-align: center;
		// width: 116rpx;
		padding: 0 20rpx;
		height: 42rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 42rpx;
		background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		border-radius: 28px;
		display: inline-block;
		margin-left: 20rpx;
	}

	.exchange,
	.log {
		position: absolute;
		bottom: #{40rpx};
		color: #fff;
		font-size: 15px;
		height: #{34rpx};
		line-height: #{34rpx};
	}

	.exchange image,
	.log image {
		height: #{34rpx};
		width: #{34rpx};
		margin-right: #{16rpx};
		display: block;
		float: left;
	}

	.exchange {
		left: #{120rpx};
	}

	.log {
		right: #{120rpx};
	}

	.about {
		height: #{30rpx};
		width: #{30rpx};
		position: absolute;
		top: #{25rpx};
		right: 38%;
	}

	.about image {
		height: #{30rpx};
		width: #{30rpx};
		display: block;
	}

	.banner {
		margin: #{20rpx} 0;
		height: #{190rpx};
	}

	.banner swiper {
		height: #{190rpx};
	}

	.banner image {
		height: #{190rpx};
		width: 100%;
	}

	.coupon {
		background-color: #fff;
		padding: #{30rpx} 0 #{40rpx} #{25rpx};
	}

	.coupon-title {
		font-size: 15px;
		color: #353535;
		border-left: #{4rpx} solid #ff6f28;
		padding-left: #{16rpx};
		height: #{35rpx};
		line-height: #{35rpx};
		margin-bottom: #{38rpx};
	}

	.coupon-list {
		height: #{220rpx};
		white-space: nowrap;
		overflow: hidden;
		width: auto;
	}

	.coupon-item {
		width: #{330rpx};
		height: #{220rpx};
		position: relative;
		display: inline-block;
		font-size: 13px;
		color: #353535;
		margin-right: #{20rpx};
	}

	.coupon-item image {
		width: #{330rpx};
		height: #{220rpx};
	}

	.coupon-name {
		position: absolute;
		left: #{24rpx};
		top: #{10rpx};
		width: #{300rpx};
		font-weight: bold;

		&.discount text:after {
			content: '折';
			font-size: 50%;
		}
	}

	.coupon-name text {
		font-size: 20px;
		margin-right: #{12rpx};
	}

	.coupon-user {
		position: absolute;
		width: #{280rpx};
		left: #{24rpx};
		top: #{70rpx};
	}

	.coupon-exchange {
		position: absolute;
		bottom: #{22rpx};
		left: 0;
		right: 0;
		text-align: center;
	}

	.coupon-exchange view {
		display: inline-block;
		padding: 0 #{28rpx};
		text-align: center;
		height: #{48rpx};
		line-height: #{48rpx};
		border-radius: #{24rpx};
		border: #{2rpx} solid #353535;
		margin: 0 auto;
	}

	.goods-title {
		padding-left: #{20rpx};
		height: #{96rpx};
		line-height: #{96rpx};
		padding-top: #{30.5rpx};
		background-color: #fff;
		margin-top: #{24rpx};
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.cat-list {
		height: #{100rpx};
		background-color: #fff;
		border-bottom: #{1rpx} solid #e2e2e2;
		white-space: nowrap;
		overflow: hidden;
		width: auto;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.cat-list1 {
		top: 100rpx;
	}

	.cat-item {
		display: inline-block;
		margin: #{23rpx};
		text-align: center;
		width: auto;
		color: #353535;
		font-size: 12px;
		height: #{54rpx};
		line-height: #{54rpx};
		padding: 0 #{20rpx};
	}

	.cat-item.active {
		border-radius: #{27rpx};
		color: #fff;
	}

	.goods-list {
		padding-left: #{24rpx};
		margin: 32rpx 0;
	}

	.goods-item {
		width: #{344rpx};
		background-color: #fff;
		font-size: 14px;
		color: #353535;
		margin: #{14rpx} #{14rpx} 0 0;
		position: relative;
		display: block;
		border-radius: #{16rpx};
	}

	.goods-name {
		margin-top: #{16rpx};
		padding-left: #{24rpx};
	}

	.goods-img {
		height: #{344rpx};
		width: #{344rpx};
		display: block;
		border-top-left-radius: #{16rpx};
		border-top-right-radius: #{16rpx};
	}


	.out-dialog {
		width: #{344rpx};
		height: #{344rpx};
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{344rpx};
			height: #{344rpx};
		}
	}

	.goods-price {
		margin-top: #{10rpx};
		margin-left: #{24rpx};
		// padding-bottom: #{125rpx};
		padding-bottom: 90rpx;
	}

	.goods-old {
		// font-size: 13px;
		// color: #999;
		color: #ff4544;
		text-decoration: line-through;
		position: absolute;
		left: #{24rpx};
		bottom: #{88rpx};
	}

	.goods-num {
		position: absolute;
		right: #{24rpx};
		bottom: #{88rpx};
		font-size: 13px;
	}

	.goods-exchange {
		height: #{48rpx};
		line-height: #{48rpx};
		border-radius: #{24rpx};
		position: absolute;
		bottom: #{24rpx};
		left: #{24rpx};
		right: #{24rpx};
		color: #fff;
		font-size: 13px;
	}

	.goods-exchange::after {
		border: 0;
	}

	.dialog-bg {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.basicf {
		padding: 42rpx 0;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	.fbottom {
		width: 550rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;

		.fname {
			width: 176rpx;
		}

		.input {
			text-align: left;
			width: 374rpx;
		}
	}

	.ftips {
		color: #707070;
		font-size: 24rpx;
		text-align: left;
		width: 550rpx;
		margin: 0 auto;
		padding-top: 14rpx;
	}

	.dialog {
		width: #{574rpx};
		margin: 0 auto;
		background-color: #fff;
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		border-radius: #{16rpx};
	}

	.close {
		height: #{30rpx};
		width: #{30rpx};
		position: absolute;
		right: #{22rpx};
		top: #{22rpx};
		z-index: 10;
	}

	.lose {
		padding: #{88rpx} 0 #{88rpx} #{90rpx};
		height: #{310rpx};
		font-size: 15px;
		color: #353535;
	}

	.lose-img {
		height: #{134rpx};
		width: #{124rpx};
		margin-right: #{48rpx};
		display: block;
		float: left;
	}

	.lose-title {
		font-size: 23px;
		font-weight: 500;
		margin: #{15rpx} 0;
	}

	.success {
		height: #{350rpx};
		background-color: #fff;
		text-align: center;
		padding-top: #{150rpx};
		font-size: 18px;
		color: #353535;
		border-radius: #{16rpx};
	}

	.success-head {
		height: #{332rpx};
		width: #{574rpx};
		position: absolute;
		top: #{-215rpx};
		left: 0;
	}

	.to-card,
	.to-use {
		margin-top: #{44rpx};
		height: #{64rpx};
		border-radius: #{32rpx};
		line-height: #{64rpx};
		width: #{228rpx};
		font-size: 16px;
	}

	.to-card::after,
	.to-use::after {
		border: 0;
	}

	.to-card {
		background-color: #fff;
		color: #353535;
		border: #{1rpx} solid #999;
	}

	.to-use {
		background-color: #ff4544;
		color: #fff;
	}

	.dialog-tip {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		padding-bottom: #{88rpx};
		width: #{640rpx};
		margin: 0 auto;
		z-index: 21;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: #{30rpx};
	}

	.dialog-msg {
		margin: 0 #{50rpx} #{50rpx};
	}

	.dialog-title {
		margin: #{40rpx} auto #{35rpx};
	}

	.dialog-btn {
		height: #{88rpx};
		width: #{640rpx};
		border-top: #{1rpx} solid #e2e2e2;
		line-height: #{88rpx};
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.dialog-close,
	.dialog-submit {
		width: 50%;
	}

	.line {
		height: #{44rpx};
		margin-top: #{22rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
	}

	.dialog-submit {
		color: #ff4544;
	}

	.success-btn {
		padding:0 #{39rpx};
	}

	.loading {
		background: rgba(31, 31, 31, .5);
		width: 100%;
		height: calc(100vh - 680rpx);
		color: #fff;
		text-align: center;
		padding-top: 25%;
		/* display: flex;
		align-items: center;
		justify-content: center; */

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>
